<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" name="viewport">
    <title>元旦拆盲盒·拆出惊喜</title>
    <!-- import CSS -->
    <link rel="stylesheet" href="/static/element_ui/css/index.css">
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        html {
            background-color: #FFE8E8;
        }

        #app {
            width: 7.5rem;
            margin: 0 auto;
        }

        .top_img {
            background-repeat: no-repeat;
            background-size: 7.5rem 9.43rem;
            width: 7.5rem;
            height: 9.43rem;
            border-radius: 0.2rem;
        }

        .ss {
            margin-top: -3.1rem;
            margin-left: 0.4rem;
            background-color: #FFFFFF;
            width: 6.71rem;
            height: 0.74rem;
            border-radius: 0.2rem;
        }

        .box {
            margin-top: 0.3rem;
            margin-left: 0.4rem;
            background-color: #FFFFFF;
            width: 6.71rem;
            height: 3.78rem;
            border-radius: 0.2rem;
            background-repeat: no-repeat;
            background-size: contain;
        }

        .des_img {
            margin-top: 0.5rem;
            margin-left: 0.4rem;
            width: 6.52rem;
            height: 1.2rem;
            background-repeat: no-repeat;
            background-size: contain;
        }

        #open_app {
            margin-left: 0.4rem;
            margin-bottom: 1.3rem;
            background-color: #FF6C89;
            width: 6.7rem;
            height: 0.88rem;
            border-radius: 0.2rem;
            text-align: center;
            line-height: 0.88rem;
            color: #FFFFFF;
            font-size: 0.4rem;
        }

        .walking_lantern {
            color: #91979d;
            width: 86%;
            margin-top: 0.2rem;
            margin-left: 0.5rem;
            line-height: 0.8rem;
            font-size: 0.22rem;
        }

        .text {
            text-align: center;
            white-space: pre-line;
        }

        span {
            color: black;
        }

        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
<div id="app" v-cloak>
    <div class="top_img" v-bind:style="{backgroundImage: 'url(' + topImg + ')'}"></div>
    <div class="ss">
        <el-carousel class="walking_lantern text" height="0.6rem" direction="vertical" :autoplay="true">
            <el-carousel-item v-for="item in prizeRecord" :key="item">
                <p>恭喜<span>{{item['nickname']}}</span>获得{{item['box_name']}}<span>{{item['prize_name']}}</span></p>
            </el-carousel-item>
        </el-carousel>
    </div>
    <div class="box" v-bind:style="{backgroundImage: 'url(' + Img + '2.png)'}"></div>
    <div class="des_img" v-bind:style="{backgroundImage: 'url(' + Img + '3.png?v=1)'}"></div>
    <div id="open_app" @click="open_app">我也要开盲盒</div>
</div>
{include file="../apps/web/view/public/open_app.html" /}
</body>
<!-- import Vue before Element -->
<script src="/static/vue.js"></script>
<!-- import JavaScript -->
<script src="/static/element_ui/js/index.js"></script>
<script src="/static/rem.js"></script>
<script>
    /**
     * 获取获取客户端浏览器类型
     * @type {{versions: {iPhone: boolean, webApp: boolean, trident: boolean, gecko: boolean, android: boolean, mobile: boolean, iPad: boolean, ios: boolean, presto: boolean, webKit: boolean}, language: string}}
     */
    var browser = {
        versions: function () {
            var u = navigator.userAgent, app = navigator.appVersion;
            return {     //移动终端浏览器版本信息
                trident: u.indexOf('Trident') > -1, //IE内核
                presto: u.indexOf('Presto') > -1, //opera内核
                webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
                gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
                mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
                ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
                android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或uc浏览器
                iPhone: u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器
                iPad: u.indexOf('iPad') > -1, //是否iPad
                webApp: u.indexOf('Safari') == -1 //是否web应用程序，没有头部与底部
            };
        }(),
        language: (navigator.browserLanguage || navigator.language).toLowerCase()
    }


    /**
     * vue控制
     */
    new Vue({
        el: '#app',
        beforeCreate:function() {
            this.active_des = '运势免费券，报告折扣券，每天超多优惠在盲盒里';
            //判断是否是移动设备打开。browser代码在下面
            console.log(browser.versions)
            if (browser.versions.mobile) {
                var ua = navigator.userAgent.toLowerCase();//获取判断用的对象
                //在微信中打开
                if (ua.match(/MicroMessenger/i) == "micromessenger") {
                    this.active_des = '您已成功助力好友获得一次开启盲盒的机会！';
                }
                //在新浪微博客户端打开
                if (ua.match(/WeiBo/i) == "weibo") {
                    this.active_des = '微博';
                }
                //在QQ空间打开
                if (ua.match(/QQ/i) == "qq") {
                    this.active_des = 'QQ';
                }
                //是否在IOS浏览器打开
                if (browser.versions.ios) {
                    this.active_des = 'IOS';
                }
                //是否在安卓浏览器打开
                if (browser.versions.android) {
                    this.active_des = 'android';
                }
            }//否则就是PC浏览器打开
            else {
                this.active_des = 'WEB';
            }
        },
        data: function () {
            return {
                topImg: '{$oss}active/web/images/shuangdan2020_share1.png',
                Img: '{$oss}active/web/images/shuangdan2020_share',
                prizeRecord: {$prizeReccord},
            }
        }, methods: {
            open_app: function () {
                new Mlink({
                    mlink: 'https://axelkv.mlinks.cc/AesI',//六周年活动
                    button: document.querySelector('#open_app')
                });
            },
        }
    })

    //友盟打点
    var SITE_ID = '1279561669'
    var cnzz_s_tag = document.createElement('script');
    cnzz_s_tag.type = 'text/javascript';
    cnzz_s_tag.async = true;
    cnzz_s_tag.charset = 'utf-8';
    cnzz_s_tag.src = 'https://w.cnzz.com/c.php?id=' + SITE_ID + '&async=1';
    var root_s = document.getElementsByTagName('script')[0];
    root_s.parentNode.insertBefore(cnzz_s_tag, root_s);
</script>
{include file="../apps/web/view/public/sensors.html" /}
</html>
